<div class="panel-body" id="ruleform" style="background: #FFFFFF;border: 2px solid #e9e9e9">
	<div class="row " style="padding-top: 10px">
		<div class="col-md-1 col-xs-1 col-lg-1">
			<div style="float: right"><span>规则名称</span></div>
		</div>
		<div class="col-md-10 col-xs-10 col-lg-10">
			<div class="form-group">
				<input class="form-control" id="rulestaticname" name="rulestaticname" style="width: 160px;" />
			</div>
		</div>
		<div class="col-md-1 col-xs-1 col-lg-1" id="show">
			<span onclick="showrulestatic('0')" style='color: #5FB9F4;cursor: pointer;'><i class='fa fa-arrow-circle-up'
                                                                                           style="margin-right: 10px"></i>收起规则</span>
		</div>
	</div>
	<div class="row " style="padding-top: 10px">
		<div class="col-md-1 col-xs-1 col-lg-1">
			<div style="float: right"><span>所在组名</span></div>
		</div>
		<div class="col-md-10 col-xs-10 col-lg-10">
			<div class="form-group">
				<input class="form-control" id="group_name" name="group_name" style="width: 160px;" />
			</div>
		</div>
	</div>
	<div class="row" style="padding-top: 10px">
		<div class="col-md-1 col-xs-1 col-lg-1">
			<div style="float: right"><span>数据源</span></div>
		</div>
		<div class="col-md-11 col-xs-11 col-lg-11">
			<div class="form-group">
				<select class="form-control" onchange="changedatatable()" id="datatable" name="datatable" style="width: 160px;">
					<option value="">请选择</option>
				</select>
			</div>
		</div>
	</div>
	<div class="row" style="padding-top: 10px">
		<div class="col-md-1 col-xs-1 col-lg-1">
			<div style="float: right"><span>指标选择</span></div>
		</div>
		<div class="col-md-11 col-xs-11 col-lg-11" id="targetgroup">
			<div class="form-group" style="overflow: hidden">
				<select class="form-control" name="target" id="target1" style="width: 160px;float: left">
					<option value="">请选择</option>
				</select>
				<span style="float: left;line-height: 30px;margin-left: 10px;margin-right: 10px;">的</span>
				<select class="form-control" name="type" id="type1" style="width: 160px;;float: left">
					<option value="">请选择</option>
					<option value="COUNT">总数</option>
					<option value="AVG">平均数</option>
					<option value="SUM">和</option>
				</select>
				<span class="target_btn"><i class="fa fa-plus" onclick="addtarget()"></i></span>
			</div>
		</div>
	</div>
	<div class="row" style="padding-top: 10px">
		<div class="col-md-1 col-xs-1 col-lg-1">
			<div style="float: right"><span>维度选择</span></div>
		</div>
		<div class="col-md-11 col-xs-11 col-lg-11" id="latitudegroup">
			<div class="form-group" style="overflow: hidden">
				<select class="form-control" id="latitude1" name="latitude" style="width: 160px;float: left;">
					<option value="">请选择</option>
				</select>
				<!--<span class="target_btn"><i class="fa fa-plus" onclick="addlatitude()"></i></span>-->
			</div>
		</div>
	</div>
	<div class="row" style="padding-top: 10px">
		<div class="col-md-1 col-xs-1 col-lg-1">
			<div style="float: right"><span>排序方式</span></div>
		</div>
		<div class="col-md-11 col-xs-11 col-lg-11">
			<div class="form-group" style="overflow: hidden">
				<select class="form-control" name="type" id="orderType" style="width: 160px;;float: left">
					<option value="">不排序</option>
					<option value="asc">升序</option>
					<option value="desc">降序</option>
				</select>
			</div>
		</div>
	</div>
	<div class="row" style="padding-top: 10px">
		<div class="col-md-1 col-xs-1 col-lg-1">
			<div style="float: right"><span>条件筛选</span></div>
		</div>
		<div class="col-md-11 col-xs-11 col-lg-11">
			<div id="builder"></div>
		</div>
	</div>
	<div class="row" style="padding-top: 10px;margin-bottom: 20px">
		<div class="col-md-1 col-xs-1 col-lg-1">
		</div>
		<div class="col-md-11 col-xs-11 col-lg-11">
			<a class="btn btn-success" onclick="yesRulestatic()">确定规则</a>
			<a class="btn btn-info" onclick="save()">保存</a>
		</div>
	</div>
</div>
<div class="panel-body" style="margin-top: 10px;background: #dde0e8;border: 2px solid #e9e9e9;padding: 5px">
	<div class="table-responsive">
		<div class="dataTables_wrapper form-inline" role="grid">
			<div class="row">
				<div class="col-sm-6">
					<div class="dataTables_length">
						<i style="font-size: 20px;margin-left: 30px;cursor: pointer;" onclick="changetype('pie')" class="iconfont icon-piechart"></i>
						<i style="font-size: 20px;margin-left: 30px;cursor: pointer;" onclick="changetype('bar')" class="iconfont icon-bars3"></i>
						<i style="font-size: 20px;margin-left: 30px;cursor: pointer;" onclick="changetype('line')" class="iconfont icon-linechart"></i>
						<i style="font-size: 20px;margin-left: 30px;cursor: pointer;" onclick="changetype('table')" class="fa fa-table"></i>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>
<div class="panel-body" style="background: #FFFFFF;border: 2px solid #e9e9e9">
	<div class="row">
		<div class="col-lg-12 col-xs-12 col-md-12">
			<div id="static" style="height:620px;width: 96%"></div>
			<div id="table" style="height:620px;width: 96%;display: none;"></div>
		</div>
		
	</div>
</div>

<script>
	var target = 1;
	var latitude = 1;
	var tableColumn = [];
	var savetype = "";
	//var queryBuilder=$("#builder").queryBuilder();
	var width = document.body.clientWidth / 12;
	$("#static").width((width * 10) - 50);
	var mycharts = echarts.init(document.getElementById("static"));
	$(function() {
		$("#tabC").addClass("rulestatic_load");
		GetTableList();
		window.onresize = function() {
			mycharts.resize();
		};
	})

	//获取数据源
	function GetTableList() {
		var json = {
			"url": GLOBAL.URL + "/sysConfig/tableInfo",
			"type": 'get',
			"successfn": function(data) {
				var str = "";
				for(var i = 0; i < data.list.length; i++) {
					str += '<option value="' + data.list[i].tableName + '">' + data.list[i].tableComment + '</option>';
				}
				$("#datatable").append(str);
			},
			"errorfn": function() {
				//ajaxUpdataTable();
				//$.ligerDialog.warn("系统繁忙，请稍候再试");
			}
		};
		ajaxdata(json);
	}

	//数据源点击事件
	function changedatatable() {
		GetTableColumnList($("#datatable").val());
	}

	//获取表字段
	function GetTableColumnList(tablename) {
		var json = {
			"url": GLOBAL.URL + "/sysConfig/tableColumn",
			"type": 'get',
			"data": {
				"tableName": tablename
			},
			"successfn": function(data) {
				if(data.code == 0) {
					if(data.info.length > 0) {
						tableColumn = data.info;
						settarget("#target1");
						setlatitude("#latitude1");
						setWhere(tableColumn);
					}
				}
			},
			"errorfn": function() {
				//ajaxUpdataTable();
				//$.ligerDialog.warn("系统繁忙，请稍候再试");
			}
		};
		ajaxdata(json);
	}

	//绑定指标
	function settarget(id) {
		var str = "";
		for(var i = 0; i < tableColumn.length; i++) {
			var lable = tableColumn[i].columnComment == "" ? tableColumn[i].columnName : tableColumn[i].columnComment;
			str += '<option value="' + tableColumn[i].columnName + '">' + lable + '</option>';
		}
		$(id).html(str);
	}

	//绑定维度
	function setlatitude(id) {
		var str = "";
		for(var i = 0; i < tableColumn.length; i++) {
			var lable = tableColumn[i].columnComment == "" ? tableColumn[i].columnName : tableColumn[i].columnComment;
			str += '<option value="' + tableColumn[i].columnName + '">' + lable + '</option>';
		}
		$(id).html(str);
	}

	//条件筛选
	function setWhere(data) {

		if(data != null) {
			$('#builder').queryBuilder('destroy');
			var filterdata = [];
			for(var i = 0; i < data.length; i++) {
				var column = {
					id: data[i].columnName,
					label: data[i].columnComment,
					type: 'string',
					operators: ['equal', 'not_equal', 'begins_with', 'contains']
				}
				filterdata.push(column);
			}
			queryBuilder = $('#builder').queryBuilder({
				filters: filterdata
			});
		}
	}

	//新增指标
	function addtarget() {
		target++;
		var str = "";
		str += '<div class="form-group" style="overflow: hidden" >';
		str += '    <select class="form-control" id="target' + target + '" name="target" style="width: 160px;float: left">';
		str += '    <option value="">请选择</option>';
		str += '    </select>';
		str += '    <span style="float: left;line-height: 30px;margin-left: 10px;margin-right: 10px;">的</span>';
		str += '    <select class="form-control" id="type' + target + '" name="type" style="width: 160px;;float: left">';
		str += '    <option value="">请选择</option>';
		str += '    <option value="COUNT">总数</option>';
		str += '    <option value="AVG">平均数</option>';
		str += '    <option value="SUM">和</option>';
		str += '    </select>';
		str += '    <span class="target_btn"><i class="fa fa-minus" onclick="deltarget(' + target + ')"></i></span>';
		str += '</div>';
		$("#targetgroup").append(str);
		settarget("#target" + target);
	}

	//删除指标
	function deltarget(index) {
		var id = "#target" + index;
		$(id).parent().remove();
	}

	//新增纬度
	function addlatitude() {
		latitude++;
		var str = "";
		str += '<div class="form-group"  style="overflow: hidden" >';
		str += '   <select class="form-control" id="latitude' + latitude + '" name="latitude" style="width: 160px;float: left;">';
		str += '   <option value="">请选择</option>';
		str += '   </select>';
		str += '   <span class="target_btn"><i class="fa fa-minus" onclick="dellatitude(' + latitude + ')"></i></span>';
		str += '</div>';
		$("#latitudegroup").append(str);
		setlatitude("#latitude" + latitude);
	}

	function dellatitude(index) {
		var id = "#latitude" + index;
		$(id).parent().remove();
	}

	//确定规则
	function yesRulestatic() {
		var data = setJson('bar');
		getstaticpic(data);
	}

	//点击保存按钮
	function save() {
		var data = setJson('bar');
		saveData(data);
	}

	//保存规则
	function saveData(data) {
		if(savetype != "") {
			data.chart_type = savetype;
		}
		$.ajax({
			url: GLOBAL.URL + "/chartinfo/save",
			type: 'POST',
			data: {
				"json": JSON.stringify(data)
			},
			dataType: "json",
			ContentType: 'application/json',
			xhrFields: {
				withCredentials: true
			},
			crossDomain: true,
			success: function(info) {
				if(info.code != "0") {
					AlertInfo("操作失败！" + info.msg);
				} else {
					AlertInfo("操作成功！");
					$("#tabC").load(GLOBAL.LOADURl);
					$("#tabC").removeClass("rulestatic_load");
					//getstaticpic(data);
				}

			},
			error: function(err) {
				//ajaxUpdataTable();
				//$.ligerDialog.warn("系统繁忙，请稍候再试");
			}
		});
	}

	//获取统计图
	function getstaticpic(data) {
		$.ajax({
			url: GLOBAL.URL + "/chartinfo/view",
			type: 'POST',
			data: {
				"json": JSON.stringify(data),
				"groupRule": data.groups[0].name,
				"chartType": data.chart_type
			},
			xhrFields: {
				withCredentials: true
			},
			crossDomain: true,
			success: function(data) {
				var option = JSON.parse(data);
				mycharts.clear();
				mycharts.setOption(option);
			},
			error: function(err) {
				//ajaxUpdataTable();
				//$.ligerDialog.warn("系统繁忙，请稍候再试");
			}
		});
	}

	//处理json
	function setJson(type) {
		var data = {
			table: "",
			scheme: "",
			orderType: "",
			group_name: "",
			chart_type: type,
			target: [],
			groups: [],
			rules: {
				condition: "AND",
				rules: [{
					id: "id",
					field: "id",
					type: "integer",
					input: "number",
					operator: "less",
					value: "1000"
				}],
				valid: true
			}
		}
		//表名
		data.table = $("#datatable").val();
		//规则名称
		data.scheme = $("#rulestaticname").val();
		//分组名称
		data.group_name = $("#group_name").val();
		//排序方式
		data.orderType = $("#orderType").val();
		//指标
		var targetlist = $("#targetgroup").children().children();
		for(var i = 1; i <= (targetlist.length / 4); i++) {
			var target = {
				name: $("#target" + i).val(),
				calctype: $("#type" + i).val(),
				alias: $("#target" + i).find("option:selected").text() + "的" + $("#type" + i).find("option:selected").text()
			};
			data.target.push(target);
		}
		//纬度
		var latitudelist = $("#latitudegroup").children().children();
		for(var i = 1; i <= (latitudelist.length); i++) {
			var latitude = {
				name: $("#latitude" + i).val(),
				alias: $("#latitude" + i).find("option:selected").text()
			};
			data.groups.push(latitude);
		}
		//条件筛选
		var rules = $('#builder').queryBuilder('getRules');
		data.rules = rules;
		return data;
	}

	//属性选择
	function changetype(type) {
		if(type != "table") {
			$("#static").show();
			$("#table").hide();
			savetype = type;
			var data = setJson(type);
			getstaticpic(data);
		}else{
			$("#static").hide();
			$("#table").show();
			savetype = type;
			var data = setJson(type);
			GetTable(data);
			
		}
	}
	//生成表格
	function GetTable(data){
		$.ajax({
			url: GLOBAL.URL + "/chartinfo/view",
			type: 'POST',
			data: {
				"json": JSON.stringify(data),
				"groupRule": data.groups[0].name,
				"chartType": data.chart_type
			},
			xhrFields: {
				withCredentials: true
			},
			crossDomain: true,
			success: function(data) {
				var datas=JSON.parse(data);
				var str="<table class='table table-striped table-bordered table-hover dataTable no-footer' aria-describedby='dataTables-example_info'><tr>";
				for(var i=0;i<datas.title.length;i++){
					str+="<td>"+datas.title[i]+"</td>";
				}
				str+="</tr>";
				for(var k=0;k<datas.data.length;k++){
					str+="<tr>";
					for(var m=0;m<datas.data[k].length;m++){
						str+="<td>"+datas.data[k][m]+"</td>";
					}	
					str+="</tr>";
				}
				str+="</table>";
				$("#table").html(str);
			},
			error: function(err) {
				//ajaxUpdataTable();
				//$.ligerDialog.warn("系统繁忙，请稍候再试");
			}
		});
	}
	function showrulestatic(info) {
		var rulenodelist = $("#ruleform").children();
		if(info == 0) {
			for(var i = 0; i < rulenodelist.length; i++) {
				if(i != 0) {
					rulenodelist[i].hidden = true;
				}
			}
			$("#show").html("<span onclick=showrulestatic('1') style='color: #5FB9F4;cursor: pointer;'><i class='fa fa-arrow-circle-down'  style='margin-right: 10px'></i>展开规则</span>")
		} else {
			for(var i = 0; i < rulenodelist.length; i++) {
				if(i != 0) {
					rulenodelist[i].hidden = false;
				}
			}
			$("#show").html("<span onclick=showrulestatic('0')  style='color: #5FB9F4;cursor: pointer;'><i class='fa fa-arrow-circle-up'  style='margin-right: 10px'></i>收起规则</span>")
		}

	}
</script>